import React, { useEffect, useState } from 'react';
import { useTitle } from 'ahooks';
import style from "./index.less"
import { Button, Form, Input, List, Modal, Popup, Stepper } from 'antd-mobile';
import { BillOutline, PhoneFill } from 'antd-mobile-icons'
import { history, useSearchParams } from 'umi';
export default () => {

  // interface Tabgg {

  //   id: string,
  //   name: string,
  //   priceMin: string,
  //   priceMax: string,
  //   number: string,
  //   unit: string,
  //   originProvinceName: string,
  //   originCityName: string,
  //   shipmentProvinceName: string,
  //   shipmentCityName: string,
  //   descs: string,
  //   userName: string,
  //   createTime: string,
  // }
  useTitle('采购详情')

  const goodsList = [
    {
      id: '1',
      name: '韭菜花',
      priceMin: '11',
      priceMax: '18',
      number: '500',
      unit: '斤',
      originProvinceName: '重庆市',
      originCityName: '巴南区',
      shipmentProvinceName: '重庆市',
      shipmentCityName: '巴南区',
      descs: '该白萝卜品种耐低温，根型大，根长约38cm，根 茎约8-9cm，根重约1.2-1.5kg，耐抽苔，口感佳， 侧根少，株型直立。此处是商品描述内容正文，字 号30px，色值#333333',
      userName: '四季化肥批发',
      createTime: '2020-04-26',

    },
    {
      id: '2',
      name: '五原黄柿子',
      priceMin: '10',
      priceMax: '16',
      number: '300',
      unit: '斤',
      originProvinceName: '内蒙古',
      originCityName: '巴彦淖尔市',
      shipmentProvinceName: '内蒙古',
      shipmentCityName: '巴彦淖尔市',
      descs: 'dsdasdsaddsd',
      userName: '四季化肥批发',
      createTime: '2020-05-06',

    },
    {
      id: '3',
      name: '韭菜花',
      priceMin: '12',
      priceMax: '20',
      number: '4',
      unit: '头',
      originProvinceName: '重庆市',
      originCityName: '巴南区',
      shipmentProvinceName: '重庆市',
      shipmentCityName: '巴南区',
      descs: 'dsdasdsaddsd',
      userName: '四季化肥批发',
      createTime: '2020-05-06',

    },
    {
      id: '4',
      name: '韭菜花',
      priceMin: '11',
      priceMax: '18',
      number: '4',
      unit: '头',
      originProvinceName: '重庆市',
      originCityName: '巴南区',
      shipmentProvinceName: '重庆市',
      shipmentCityName: '巴南区',
      descs: 'dsdasdsaddsd',
      userName: '四季化肥批发',
      createTime: '2020-05-06',

    },
  ]


  // const [data, setData] = useState<Tabgg>({} as Tabgg);
  const [form]=Form.useForm();
  const [visible2, setVisible2] = React.useState<boolean>(false);
  const [visible, setVisible] = React.useState<boolean>(false);
  const [searchParams] = useSearchParams();
  const [quantity, setQuantity] = useState(1);
  const [price, setPrice] = useState('');
  const [total, setTotal] = useState(0);
  const handleQuantityChange =(value: any) => {
    setQuantity(value);
    console.log(quantity);

     calculateTotal(value, price);
  };

  const handlePriceChange = (event: any) => {

    setPrice(event);
    console.log(price);

     calculateTotal(quantity, event);
  };

  const calculateTotal = (qu: number, pri: string) => {
    const result = qu * Number(pri) ;
    setTotal(result);
  };

  const data = goodsList[Number(searchParams.get('id')) - 1]
  console.log(searchParams.get('id'));
  const onSubmit = async () => {
    form.validateFields().then(values => {
      console.log(values); // 验证成功，获取表单数据
      setVisible(false);
      history.push('/tishi');
      
  }).catch(error => {
      console.log(error); 
  })
    
  };
  useEffect(() => {

    // setData(goodsList)
  }, [])
  console.log(quantity)
  return (
    <div className={style.page}>
      <div className={style.content}>
        <div className={style.block}>
          <div className={style.title}>采购商品信息</div>
          <List.Item
            extra={<div className={style['goods-name']}>{data?.name}</div>}
          >
            商品名称
          </List.Item>
          <List.Item
            extra={
              <div className={style['goods-name']}>
                ¥{data?.priceMin}-{data?.priceMax}
              </div>
            }
          >
            价格
          </List.Item>
          <List.Item
            extra={
              <div className={style['goods-name']}>
                {data?.number}
                {data?.unit}
              </div>
            }
          >
            商品数量
          </List.Item>
          <List.Item
            extra={
              <div className={style['goods-name']}>
                {data?.originProvinceName}
                {data?.originCityName}
              </div>
            }
          >
            产地
          </List.Item>
          <List.Item
            extra={
              <div className={style['goods-name']}>
                {data?.shipmentProvinceName}
                {data?.shipmentCityName}
              </div>
            }
          >
            发货地
          </List.Item>
        </div>
        <div className={style.block}>
          <div className={style.title}>商品描述</div>
          <div className={style.remark}>{data?.descs}</div>
        </div>
        <div className={style.block}>
          <div className={style.title}>
            采购人信息{' '}
            <span className={style.icon} onClick={() => {
              history.push(`caigou`);
            }} >
              <BillOutline />
              查看更多报价
            </span>
          </div>
          <List.Item extra={<div className={style['goods-name']}>{data?.userName}</div>}>采购人</List.Item>
          <List.Item extra={<div className={style['goods-name']}>{data?.createTime}</div>}>发布时间</List.Item>
        </div>

        <div className={style['btn-warp']}>
          <div
            onClick={async () => {

              setVisible(true);
            }}
          >
            生成供货订单
          </div>
          <div
            className={style.green}
            onClick={async () => {

              setVisible2(true);

            }}
          >
            <PhoneFill />
            联系买家
          </div>
        </div>
      </div>
      <Form  form={form}>
        <Popup

          visible={visible}
          showCloseButton={true}
          onClose={() => {

            setVisible(false);
          }}
        >
          <div className={style.modal}>
            <div className={style.content}>
              <div className={style.info}>
                <div className={style.tip}>{data?.name}</div>
                <div className={style.money}>
                  ￥{data.priceMin}-{data.priceMax}
                </div>
              </div>
            </div>
            <div className={style.line}>
              <div className={style.label}>供应数量</div>
              <Form.Item
                childElementPosition='right'
                name='quantity'
                initialValue={1}
              >
                <Stepper
                  max={99999.99}
                  min={1}
                  
                  value	={quantity}
                  className={style.stepper}
                  onChange={handleQuantityChange}
                />
              </Form.Item>
            </div>
            <div className={style.line}>
              <div className={style.label}>报价</div>
              <div className={style.control}>
                <Form.Item
                  name='quotation'
                  rules={[{ required: true, message: '金额不能为空' }]}
                >
                  <Input
                    max={99999.99}
                    min={0}
                    placeholder='请输入金额'
                    style={{ '--text-align': 'right' }}
                    clearable
                    value={price}
                    onChange={handlePriceChange}
                  />
                </Form.Item>

              </div>
            </div>
            <div className={style.line}>
              <div className={style.label}>合计</div>
              <div className={style.control}>
                <span className={style.money}>￥{total.toFixed(2)}</span>
              </div>
            </div>
            <Button  color="primary" block size='large' onClick={onSubmit} style={{ backgroundColor: '#21B47C' }}>
              确定
            </Button>
          </div>

        </Popup>
      </Form>

      <Modal
        visible={visible2}
        transparent
        maskClosable={false}
        showCloseButton={true}
        onClose={() => {
          setVisible2(false);
        }}
        title="联系方式"
        className={style.modal2}
        content={
          (<div className={style['info-warp']}>
            <div className={style.line2}>
              <div className={style.info}>
                <div className={style.tip}>
                  以下是采购方的联系方式，请电话联系
                </div>
                <div className={style.phone}>
                  <span>
                    {'杨世杰'}
                    {'1006565656'}
                  </span>
                </div>
              </div>
              <div
                className={style.icon}
                onClick={() => {

                }}
              >
                <div>
                  <PhoneFill />
                </div>
                呼叫
              </div>
            </div>
          </div>)}
      >


      </Modal>











    </div>
  );







}